<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:28
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:14:37
 * @FilePath: \i-hos-app\shared\emr\src\components\common\EmrAsideAttr.vue
 * @Description: 电子病历操作页面配置栏
-->
<template>
  <div class="attrConfig">
    <el-form label-width="65px" :model="val" v-if="!!Object.keys(val).length">
      <el-form-item label="文档类型" v-if="val.type != undefined">
        <el-input v-model="val.type" disabled placeholder="文档类型" />
      </el-form-item>
      <el-form-item label="标识" v-if="val.name != undefined">
        <el-input v-model="val.name" placeholder="标识" />
      </el-form-item>
      <el-form-item label="描述" v-if="val.des != undefined">
        <el-input v-model="val.des" placeholder="描述" />
      </el-form-item>
      <el-form-item label="文本" v-if="val.textVal != undefined">
        <el-input v-model="val.textVal" placeholder="文本" />
      </el-form-item>
      <el-form-item label="编码" v-if="val.code != undefined">
        <el-input v-model="val.code" placeholder="编码" />
      </el-form-item>
      <el-form-item label="选项值" v-if="val.option != undefined">
        <el-input v-model="val.option" placeholder="选项值" type="textarea" :autosize="{ minRows: 4, maxRows: 10 }" />
      </el-form-item>
      <el-form-item v-if="val.multi != undefined">
        <el-checkbox v-model="val.multi" label="是否多选" />
      </el-form-item>
      <el-form-item label="最小宽度" v-if="val.hasOwnProperty('minWidth')">
        <el-input-number :min="1" v-model="val.minWidth" />
        <span style="color: #606266">(单位:mm)</span>
      </el-form-item>
      <el-form-item label="排列方向" v-if="val.array != undefined">
        <el-radio-group v-model="val.array" class="ml-4">
          <el-radio label="1">横向排列</el-radio>
          <el-radio label="2">纵向排列</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="对齐方式" v-if="val.alignment != undefined">
        <el-radio-group v-model="val.alignment" class="ml-4">
          <el-radio label="left">居左</el-radio>
          <el-radio label="center">居中</el-radio>
          <el-radio label="right">居右</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="背景色" v-if="val.bgColor != undefined">
        <el-color-picker v-model="val.bgColor" />
      </el-form-item>
      <el-form-item v-if="val.validate != undefined">
        <el-checkbox v-model="val.validate" label="是否必填" />
      </el-form-item>
      <el-form-item v-if="val.edit != undefined">
        <el-checkbox v-model="val.edit" label="是否可编辑" />
      </el-form-item>
      <el-form-item v-if="Object.keys(val).length > 1" style="margin-top: 30px">
        <el-button @click="commitConfig" type="primary">确定</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <el-empty v-else description="无任何配置属性" :image-size="150" />
  </div>
</template>

<script setup lang="ts">
  import { toRefs } from 'vue'
  // 接口约束
  import { IPageConfigStore } from '../../interface/page'

  // 修改配置项
  import { changeConfig } from '../../hooks/useChangeConfig'

  // 电子病历侧栏配置数据
  import { usePageConfigStore } from '../../store/pageConfig'
  // 解构 store的配置数据
  const pageConfigStore: IPageConfigStore = usePageConfigStore()
  const { val } = toRefs(pageConfigStore)

  // 确定修改配置信息
  const commitConfig = (): void => {
    changeConfig(val.value)
  }
</script>

<style lang="scss" scoped>
  .attrConfig {
    width: 100%;
  }
</style>
